<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PL/0编译器</title>
  <style type="text/css">
    body{
      background: url("img/background.jpg") no-repeat center center fixed;
      /*兼容浏览器版本*/
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
  </style>
</head>
<body>
<div id="app">
  <el-dialog title="欢迎使用PL/0编译器" :visible.sync="mainDialogVisible" width="30%" center>
    <span slot="footer" class="dialog-footer">
      <el-button round @click="openLoginForm">登 录</el-button>
      <el-button round @click="openRegisterForm">注 册</el-button>
    </span>
  </el-dialog>

  <el-dialog title="用户登录" :visible.sync="loginDialogVisible" width="30%">
    <el-form ref="form" :model="user" label-width="80px">
      <el-form-item label="邮箱">
        <el-input v-model="user.account"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" show-password></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="cancelLogin">取 消</el-button>
        <el-button type="primary" @click="login">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog title="用户注册" :visible.sync="registerDialogVisible" width="30%">
    <el-form ref="form" :model="user" label-width="80px">
      <el-form-item label="邮箱">
        <el-input v-model="user.account"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="user.telephone"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="user.confirmPassword" show-password></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="cancelRegister">取 消</el-button>
        <el-button type="primary" @click="register">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<script>
  new Vue({
    el: "#app",

    mounted(){
      this.mainDialogVisible = true;
    },

    methods: {
      openLoginForm() {
        this.mainDialogVisible = false;
        this.loginDialogVisible = true;
      },
      openRegisterForm() {
        this.mainDialogVisible = false;
        this.registerDialogVisible = true;
      },
      cancelLogin() {
        this.loginDialogVisible = false;
        this.mainDialogVisible = true;
      },
      cancelRegister() {
        this.registerDialogVisible = false;
        this.mainDialogVisible = true;
      },
      gotoPage() {
        location.replace("http://localhost:8080/user.html?account=" + this.account);
        this.user.account = "";
        this.user.password = "";
        this.user.name = "";
        this.user.telephone = "";
        this.user.confirmPassword = "";
      },
      login() {
        axios.get("http://localhost:8080/users/" + this.user.account + "/" + this.user.password).then(resp => {
                  if(resp.data.code === 20041) {
                    this.$message.success("登陆成功！");
                    this.account = this.user.account;
                    this.loginDialogVisible = false;
                    this.gotoPage();
                  }
                  else if(resp.data.code === 20040) {
                    this.$message.error("账号或密码错误");
                  }
                  else {
                    this.$message.error("错误！服务器请求超时");
                  }
                  this.user.account = "";
                  this.user.password = "";
                }
        );
      },
      register() {
        if(this.user.name === "") {
          this.$message.error("姓名不能为空");
        }
        else if(this.user.telephone === "") {
          this.$message.error("联系方式不能为空");
        }
        else if(this.user.password === "") {
          this.$message.error("密码不能为空");
        }
        else {
          if (this.user.password === this.user.confirmPassword) {
            axios.post("http://localhost:8080/users", this.user).then(resp => {
              if (resp.data.code === 20011) {
                this.$message.success("注册成功！");
              }
              else if (resp.data.code === 20010) {
                this.$message.error("用户名已存在");
              }
              else {
                this.$message.error("错误，服务器响应超时！");
              }
              this.user.account = "";
              this.user.password = "";
              this.user.name = "";
              this.user.telephone = "";
              this.user.confirmPassword = "";
            });
          }
          else {
            this.$message.error("密码与确认密码不一致");
            this.user.password = "";
            this.user.confirmPassword = "";
          }
        }
      }
    },

    data() {
      return {
        mainDialogVisible: false,
        loginDialogVisible: false,
        registerDialogVisible: false,
        user: {
          id: "",
          account: "",
          password: "",
          name: "",
          telephone: "",
          confirmPassword: ""
        },
        account: ""
      };
    }
  })
</script>
</body>
</html>